<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 320px;
            display: flex;
            flex-direction: column;
            margin: 50px auto;
            border: 3px solid #333;
        }

        .box>ul {
            height: 60px;
            display: flex;
        }

        .box>ul>li {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            color: #fff;
            background-color: skyblue;
            cursor: pointer;
        }

        .box>ul>li.active {
            background-color: orange;
        }

        .box>ol {
            flex: 1;
            position: relative;
        }

        .box>ol>li {
            width: 100%;
            height: 100%;
            background-color: purple;
            font-size: 50px;
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .box>ol>li.active {
            display: block;
        }
    </style>
</head>

<body>

    <div class="box" id="box1">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>

    <div class="box" id="box2">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>


    <div class="box" id="box3">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>

        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>

        </ol>
    </div>

    <script>
        // var box1ele = document.getElementById('box1');
        // var btns = box1ele.querySelectorAll('ul > li');
        // var boxes = box1ele.querySelectorAll('ol > li');

        // for(let i=0;i<btns.length;i++){
        //     btns[i].onclick = function(){

        //         for(let j=0;j<btns.length;j++){
        //             btns[j].classList.remove('active');
        //             boxes[j].classList.remove('active');

        //         }
        //         btns[i].classList.add('active');
        //         boxes[i].classList.add('active');

        //     }
        // }



        // var box2ele = document.getElementById('box2');
        // var btns2 = box2ele.querySelectorAll('ul > li');
        // var boxes2 = box2ele.querySelectorAll('ol > li');

        // for(let i=0;i<btns2.length;i++){
        //     btns2[i].onclick = function(){

        //         for(let j=0;j<btns2.length;j++){
        //             btns2[j].classList.remove('active');
        //             boxes2[j].classList.remove('active');

        //         }
        //         btns2[i].classList.add('active');
        //         boxes2[i].classList.add('active');

        //     }
        // }

        // 上面是面向过程 
        // 每个选项卡 都得 写一遍  
        // 发现一个问题 好多代码重复的  

        // 面向的思想  

        // 找两个会处理选项的卡的对象 

        // 想办法造两个这样的对象 

        // 造这样的对象得有 构造函数  


        // 构造函数 
        // 属性写在函数体内  

        // 方法写在 原型上  

        // 此刻 我们的构造函数 需要哪些属性和方法  

        // 需要大盒子  div 
        // 所有的按钮 
        // 所有的盒子  


        // 方法
        // 给每个按钮绑定点击事件 
        // 给按钮添加或者删除class="active"
        // 给盒子添加或者删除class="active"


        // function Tab(){
        //     // 属性
        // }

        // Tab.prototype.方法名


        // 对象1 = new Tab()   //哪个选项卡 所有的按钮 所有的盒子 

        // 对象2 = new Tab()    //哪个选项卡 所有的按钮 所有的盒子 




        function Tab(selector) {
            this.ele = document.querySelector(selector)   //哪个大盒子 
            this.btns = this.ele.querySelectorAll('ul > li');  // 大盒子的按钮
            this.boxes = this.ele.querySelectorAll('ol > li');  // 大盒子里边所有的小盒子
            this.init(); // 实例化对象后自动调用自己的方法 
        }

        // Tab.prototype.init = function () {
        //     // 遍历每个按钮 绑定点击事件 

        //     // 移除所有的按钮高亮  隐藏所有额小盒子 
        //     // 点击谁 哪个按钮高亮  哪个盒子显示 

        //     for (let i = 0; i < this.btns.length; i++) {
        //         this.btns[i].onclick = function () {
        //             // alert(this); // 这个this是事件源
        //             // 点击哪个li this 就是谁 
        //             for (let j = 0; j < this.btns.length; j++) {
        //                 //  这个this 我们希望是新创建的对象 
        //                 // 实际上 因为在事件处理函数中 this 指向了事件源
        //                 //  所以这里报错 
        //                 this.btns[j].classList.remove('active');
        //                 this.boxes[j].classList.remove('active');

        //             }
        //             this.btns[i].classList.add('active');
        //             this.boxes[i].classList.add('active');

        //         }
        //     }
        // }

        

        // 解决方案  1
        // Tab.prototype.init = function () {
        //     // 遍历每个按钮 绑定点击事件 

        //     // 提前用一个变量 保存 这个对象所有按钮 避免冲突
        //     var allbtns = this.btns;
        //     var allboxes = this.boxes;
        //     for (let i = 0; i < this.btns.length; i++) {
        //         this.btns[i].onclick = function () {
        //             // alert(this); // 这个this是事件源
        //             // 点击哪个li this 就是谁 
        //             for (let j = 0; j < allbtns.length; j++) {
        //                 //  这个this 我们希望是新创建的对象 
        //                 // 实际上 因为在事件处理函数中 this 指向了事件源
        //                 //  所以这里报错 
        //                 allbtns[j].classList.remove('active');
        //                 allboxes[j].classList.remove('active');

        //             }
        //             allbtns[i].classList.add('active');
        //             allboxes[i].classList.add('active');

        //         }
        //     }
        // }
    
        // 解决方案2  利用箭头函数  没有this  不会起冲突  

        Tab.prototype.init = function(){
            for(let i=0;i<this.btns.length;i++){
                this.btns[i].addEventListener('click',()=>{
                    for(let j=0;j<this.btns.length;j++){
                        this.btns[j].classList.remove('active');
                        this.boxes[j].classList.remove('active');

                    }
                        this.btns[i].classList.add('active');
                        this.boxes[i].classList.add('active');
                });
            }
        }
    
    
    
        var t1 = new Tab('#box1');
        // t1.init();


        var t2 = new Tab('#box2');
        // t2.init();

        var t3 = new Tab('#box3');
        // t3.init();


    </script>
</body>

</html>